<template>
  <div>
    <div >
      <el-button @click="dirFlag=true" style="margin-top:30px; margin-bottom: 30px;" type="primary">添加目录</el-button>
      <el-table :data="dirList" :highlight-current-row="true"
      @current-change="tableChange">
        <el-table-column label="目录名" prop="CDName">

        </el-table-column>
        <el-table-column label="课件数" prop="CourseNumber">

        </el-table-column>

          <el-table-column label="操作">
              <template #default="{row}">
                <div>
                      <el-link type="primary" @click="toEdit(row)">编辑</el-link>
                      <el-link type="danger" @click="toDel(row._id)">删除</el-link>
                </div>
              </template>
        </el-table-column>
      </el-table>
      <el-dialog :title="title" width="50%" v-model="dirFlag">
          <el-form>
              <el-form-item label="目录名称">
                  <el-input v-model="CDName" placeholder="输入目录名称"></el-input>
              </el-form-item>
          </el-form>
          <template #footer>
            <div>
              <el-button type="primary" @click="toSure">确定</el-button>
              <el-button type="danger" @click="close">取消</el-button>
            </div>
          </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
  import {ref} from 'vue'
  import {addDirApi,editDirApi,delDirApi,getCourseDir} from '../../../api/course'

  import {useRoute} from 'vue-router'
  import mitt from '../../../utils/mitt'
  let route=useRoute();
  let  title=ref('添加目录')
  let dirFlag=ref(false)
  let dirid=ref('')//目录id
    let CDName=ref('')//目录名称
    let dirList=ref([]) //目录列表
  // 监听兄弟组件传来的目录列表
    mitt.on("senddir",(list)=>{
        dirList.value=list;
    })

// 添加目录接口和编辑目录接口
  let toSure=async ()=>{
          let data={
              CDName:CDName.value,
              CDid:route.query.ID,
              dirid:route.query._id,
              dirid:dirid.value
          }
          if(dirid.value){//有目录id 走编辑接口
              let editRes=await editDirApi(data)
               console.log(editRes)
                dirList.value=editRes.data.list;
          }else{ //添加接口
                let res=await addDirApi(data)
                 console.log(res)
                   dirList.value=res.data.list;
          }
        title.value="添加目录"
         dirid.value="" //清空目录id
        dirFlag.value=false;
        CDName.value=""
      
     
  }
  let close=()=>{
      dirFlag.value=false;
  }
  // 点击编辑进行回显
    let toEdit=(row)=>{
        CDName.value=row.CDName;//回显目录名称
        dirid.value=row._id; //存储目录id
         dirFlag.value=true;
         title.value="编辑目录"
    }
    // 获取课程下的目录列表
    let getDirList=async ()=>{
        let res=await getCourseDir({
          CDid:route.query.ID
        })
        console.log(res,"9999999999")
    }
    getDirList();
    // 删除目录
      let toDel=async (_id)=>{
           console.log("7777666")
          let res=await delDirApi({
            CDid:route.query._id, //课程的_id
            _id:_id
          })
          console.log(res,"-----")
          // 让兄弟组件 获取新的数据
          mitt.emit("getdir")
      }

      // 当前目录表格的选中
      let tableChange=(currentRow)=>{
          console.log(currentRow,"---------")
          // 选中表格给兄弟组件传递目录_id
          mitt.emit("todirid",currentRow._id)
      }
</script>
<style lang="less" scoped>
  .el-table  ::v-deep .current-row   td{
    background:skyblue !important;
  }
</style>